<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .cart {
        width: 900px;
        height: 300px;
        display: flex;
        justify-content: space-between;
    }

    .cart .leftbox {
        width: 300px;
        height: 300px;
        position: relative;
    }

    .cart .leftbox img {
        width: 300px;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: 1s;
    }

    .cart .leftbox .glass {
        width: 100px;
        height: 100px;
        background-color: rgba(233, 221, 62, 0.7);
        z-index: 7;

        position: absolute;
        left: 0px;
        top: 0px;

        display: none;
        pointer-events: none;
    }

    .cart .leftbox ul {
        margin-top: 250px;
        margin-left: 50px;
        width: 200px;
        display: flex;
        justify-content: space-around;
    }

    .cart .leftbox ul>li {
        width: 20px;
        height: 20px;

        border-radius: 10px;
        background-color: rgba(15, 15, 15, 0.6);
        z-index: 5;

        pointer-events: none;
    }

    .active {
        background-color: rgba(224, 212, 38, 0.6) !important;
    }

    .on {
        opacity: 1 !important;
        ;
    }
    .active1{
        display: block!important;
    }
    .cart .rightbox {
        width: 600px;
        height: 300px;
        position: relative;
    }

    .cart .rightbox .pic {

        width: 300px;
        height: 300px;

        overflow: hidden;
        position: relative;
        z-index: 2;
        display: none;
    }

    .cart .rightbox .pic img {
        position: absolute;
        left: 0;
        top: 0;
        width: 900px;
        display: none;
    }

    .cart .rightbox .underbox {
        position: absolute;
        left: 0;
        top: 0;
    }
</style>

<body>
    <div class="cart">
        <!-- 渲染出详细信息！ -->
    </div>
    <script src="js/Jquery3.6.js"></script>
    <script>
        //获取id
        const id = localStorage.getItem("id")
        $.ajax({
            type: "get",
            url: `http://www.xiongmaoyouxuan.com/api/detail?id=${id}`,
            success: function (res) {
                if (res.code == 200) {
                    showBox(res.data);
                }
            },
            error: function (res) {
                alert("网络出错" + res.status);
            }
        })
        //渲染页面
        function showBox(data) {
            //图片转化为字符串
            let photos = data.detail.photo;
            let str1 = photos.map(item => {
                return `<img src="${item.url}">`
            }).join("")
            let str = `
                <div class="leftbox">
                ${str1}
                <ul>
                <li class="active"></li>
                <li></li>  
                <li></li>  
                <li></li>      
                <li></li>  
                </ul>
                <div class="glass"></div>
                </div>
                <div class="rightbox">
                <div class="pic">
                ${str1}    
                </div>
                <div  class="underbox">
                <span>包邮</span>
                <p>${data.share.title}</p>
                <div class="littlebox">
                    <p>原价￥${data.detail.originPrice}</p>
                    <p><span>券后价:￥${data.detail.price}</span><span>${data.detail.couponValue}</span><span>${data.detail.saleNum}人已买</span></p>
                    <button>加入购物车</button>
                </div>
                </div>
                </div>`
            $(".cart").html(str)
            $(".leftbox>img").eq(0).addClass("on")
            $(".pic>img").eq(0).addClass("active1")
            bannerClick()
            setTime()
        }

        function bannerClick() {
            $(".leftbox>ul>li").on("click", function () {
                //清除所有的li的class名
                $(".leftbox>ul>li").removeClass()
                // 给点击的li添加class名
                $(this).addClass("active")
                //清除所有的img的class名
                $(".leftbox>img").removeClass()
                // 给对应索引号的img添加class名
                $(".leftbox>img").eq($(this).index()).addClass("on")
            })
        }
        //定时器设置
        function setTime() {
            let time1 = setInterval(bannerrun, 4000);
            //鼠标移上去关闭定时器
            $(".leftbox").on("mouseover", function () {
                clearInterval(time1);
                $(".glass").css("display","block");
                $(".pic").css("display","block");
                glassRun()
            })
            //鼠标移出去开启定时器
            $(".leftbox").on("mouseout", function () {
                time1 = setInterval(bannerrun, 4000)
                $(".glass").css("display","none");
                $(".pic").css("display","none");
            })
        }
        //轮播函数
        function bannerrun() {
            // 下一张确定索引号
            let index = $(".on").index() + 1
            // 重复播放
            if (index >= 5) {
                index = 0;
            }
            //清除所有的li的class名
            $(".leftbox>ul>li").removeClass()
            //清除所有的img的class名
            $(".leftbox>img").removeClass()
            $(".pic>img").removeClass()
            //切换到下一张
            $(".leftbox>ul>li").eq(index).addClass("active")
            $(".leftbox>img").eq(index).addClass("on")
            $(".pic>img").eq(index).addClass("active1")
        }

        /*
         **放大镜
         */

        function glassRun() {
            //glass跟随鼠标移动
            $(".leftbox").on("mousemove",e=>{
                e=e||window.event;
                //获取.glass跟随鼠标移动坐标
                let X=e.offsetX-$(".glass").width()/2;
                let Y=e.offsetY-$(".glass").height()/2;
                //设置边界
                if(X<0)X=0;
                if(Y<0)Y=0;
                if(X>$(".leftbox").width()-$(".glass").width())X=$(".leftbox").width()-$(".glass").width();
                if(Y>$(".leftbox").height()-$(".glass").height())Y=$(".leftbox").height()-$(".glass").height();
                //放大图片移动距离
                let bgX=X/$(".leftbox").width()*$(".pic>img").width()
                let bgY=Y/$(".leftbox").height()*$(".pic>img").height()
                //将坐标赋予.glass
                $(".glass").css({"top":Y,"left":X})
                $(".pic>img").css({
                    "top":-bgY,
                    "left":-bgX
                })

            })
        }
    </script>
</body>

</html>